<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <title>first web</title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <div class="ui inverted vertical  segment">
            <div class="ui image">
                <img src="{% static 'images/banner.jpg' %}" alt="" />
            </div>
        </div>
        {% for Subject in subject_list %}
        <div class="ui  vertical  segment">
            <div class="ui container segment">
                <h1 class="ui header">{{ Subject.belong_less }}</h1>
                <h3 class="ui header">老师： {{ request.user }}</h3>
                <h4 class="ui header">{{ Subject.time }}</h4>
                <h4 class="ui header">{{ Subject.name }}</h4>
                {% if Subject.image %}
                <img src="/upload/{{ Subject.image }}" alt="" />
                {% endif %}
                {% if Subject.video %}

                <video src="/upload/{{ Subject.video }}" controls="controls"></video>
                {% endif %}
                <p>
                    {{ Subject.comment | truncatewords:"30" }}
                    <a href="{{ Subject.comment }}">
                        <i class="angle tiny double grey right icon">READMORE</i>
                    </a>
                </p>
                <button type="button" name="button" class="ui inverted blue button">Read more</button>
            </div>
        </div>
        {% endfor %}

        <div class="ui inverted  vertical very padded  segment">
            Mugglecoding®
        </div>
    </body>
</html>
